﻿<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1,user-scalable=no">
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
	<link rel="stylesheet" href="index.css">
	<link rel="stylesheet" href="index.custom.css">
	<script type="text/javascript" src="../js/jquery.js"></script>
    <title>神奇弹幕连麦提醒</title>
    <style>
    </style>
  </head>
  <body>
    <div class="info">等待连麦：<div id="voice_count" class="voice_count">0</div>&nbsp;&nbsp;<div id="divCurrent" class="divCurrent" style="display:none;">当前连麦：<div id="currentVoice" class="currentVoice"><img src="http://127.0.0.1:5520/api/header?uid=113579884"><span>水良子</span></div></div></div>
	<audio id="call" src="call.wav">
  </body>
  <script type="text/javascript">	
		$(document).ready(function () {
			var ws = new WebSocket("ws://__DOMAIN__:__WS_PORT__");
			ws.onopen = function () {
			var json = { cmd: "cmds", data: ["VOICE_JOIN_LIST", "VOICE_JOIN_STATUS"] };
			ws.send(JSON.stringify(json));
				try {
				  socketInited(); // !socket初始化完毕
				} catch (err) {
				  // console.log(err);
				}
			}
			ws.onmessage = function (e) {
				console.log(e.data);
				var json = JSON.parse(e.data);
				var cmd = json['cmd'];
				switch (cmd) {
				  case 'VOICE_JOIN_LIST':
						readListInfo(json['data']);
						break;
				  case 'VOICE_JOIN_STATUS':
						readCurrentInfo(json['data']);
						break;
				}
			}

			function socketInited() {
			}
		});
			
		//获取等待连麦数量
		function readListInfo(data){
			if(parseInt($("#voice_count").text())<data["extra"]["apply_count"]){
				document.getElementById("call").play();
			}
			$("#voice_count").text(data["extra"]["apply_count"]);
		}
		
		//获取当前连麦信息
		function readCurrentInfo(data){
			if(data["extra"]["uid"]!=0){
				$("#currentVoice>img").attr("src",'http://__DOMAIN__:__PORT__/api/header?uid='+data["extra"]["uid"]);
				$("#currentVoice>span").text(data["extra"]["user_name"]);
				$("#divCurrent").css("display","inline-flex");
			}
			else{
				$("#divCurrent").css("display","none");
			}
		}
	</script>
</html>